<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" href="../css/swiper.min.css">
      <link rel="stylesheet" href="../css/swiper.css">
      <script src="../script/swiper.min.js"></script>
      <style>
      body{
          padding-top: 1.5rem;
      }
      .header{
            width: 93%;
            height: 2.5rem;
            line-height: 2.5rem;
            padding: 0.5rem 0.8rem;
            text-align: center;
            position: fixed;
            top:1.5rem;
            background-color: #fff;
            z-index: 999;
        }
        .header_img{
          width: 6%;
          height: 45%;
          float: left;
          margin-top: 0.5rem;
        }
      .header_img img{
        width: 100%;
        height: 100%;
      }
      .header h3{
        line-height: 3rem;
        width: 90%;
        text-align: center;
      }
      .nav{
        width: 100%;
        height: 60%;
        padding: 0rem 0rem 0.3rem 0rem;
        background-color: rgb(242, 242, 242, 0.5);
        margin-top: 3rem;
      }
      .nav_now{
        background-color: #fff;
      }
      .img{
        width: 100%;
        height: 80%;
      }
      .img img{
        width: 100%;
        height: 100%;
      }
      .text{
        width: 93%;
        padding: 0.5rem 0.8rem;
      }
      .main_img{
        width: 93%;
        height: 60%;

      margin: 0rem auto 4rem;
            }
      .main_img img{
        width: 100%;
        height: 100%;
      }
      .footer{
        width: 100%;
        height: 3rem;
        background-color: #ff4d4d;
        color: #fff;
        text-align: center;
        line-height:3rem;
        margin-top: 0.8rem;
        position: fixed;
        bottom: 0rem;
      }
      .banner {
          width: 100%;
          height: 16rem;
          margin-top: 0.5rem;
      }
      </style>
  </head>
  <body>
    <div class="header">
      <div class="header_img" onclick="closewin()">
        <img src="../image/u18.png" alt="">
      </div>
      <h3>商品详情</h3>
    </div>
    <div class="nav">
      <div class="nav_now">
        <div class="banner" id="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper" style="margin-top:0.5rem;height: 15rem;" id="img_list">
                    <div class="swiper-slide"><img src="../image/u5.png" width="100%" height="100%"></div>
                    <div class="swiper-slide"><img src="../image/u16.png" width="100%" height="100%"></div>
                </div>
            </div>
        </div>
      <div class="text">
        <h4 id="pro_name"></h4>
        <p style="color:red;margin-top:0.5rem;font-size:1.1rem;" id="pro_price">￥</p>
        <p style="color:#ccc;margin-top:0.5rem;" id="freight"></p>
      </div>
    </div>
  </div>
  <div class="main_img" id="content">

  </div>
  <div class="footer" onclick="by_now()">
    立即购买
  </div>
  </body>
  <script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">

var userinfo = $api.getStorage('userinfo');
var id
var address_id
  apiready = function(){
    id = api.pageParam.id

    api.addEventListener({
        name:'user_login',
        extra:{
            threshold:0
        }
    }, function(ret, err){
            userinfo=$api.getStorage('userinfo');
          //	get_user()//获取用户数据

    });

    api.addEventListener({
        name:'user_register',
        extra:{
            threshold:0
        }
    }, function(ret, err){
            userinfo=$api.getStorage('userinfo');
            //get_user()//获取用户数据

    });

    api.addEventListener({
        name:'user_out',
        extra:{
            threshold:0
        }
    }, function(ret, err){
            userinfo=$api.getStorage('userinfo');
          //	get_user()//获取用户数据

    });

      get_pro()
  };

  function by_now() {
    if(!userinfo){
      login_at()
      return false;
    }

    api.ajax({
        url:  SITE_URL+'product_api/product/by_now',
        method: 'post',
        data: {
            values: {
                pro_id: id,
                user_id:userinfo.id,
            }
        }
    },function(ret, err){
        if (ret) {
          if(ret.error==200){//可以兑换
              api.confirm( {
                title: '是否确认兑换',
                msg: '您需要花费'+ret.data+'学分来兑换此商品',
                buttons: [ '兑换', '再想想' ]
              }, function ( ret, err ) {
                var index = ret.buttonIndex;
                if ( index == 1 ) {
                  send_df()
                }
              } )

          }else if(ret.error==300){
            msgcode('很抱歉,您的学分不足')
          }else if(ret.error==250){
            msgcode('很抱歉,该商品刚刚已经兑换光了')
          }else{
            msgcode('稍后再试')
          }
            //alert( JSON.stringify( ret ) );
        } else {
          msgcode('请检查网络连接')
            //alert( JSON.stringify( err ) );
        }
    });

  }

  function send_df() {
    api.ajax({
        url: SITE_URL+'product_api/address/get_address',
        method: 'post',
        data: {
            values: {
                user_id: userinfo.id
            }
        }
    },function(ret, err){
        if (ret) {
          if(ret.error==200){//有地址
            api.openWin({
                name: 'caddress',
                url: './caddress.html',
                pageParam: {
                            id: id
                        }
            });
          }else{//无地址
            api.openWin({
                name: 'caddress',
                url: './caddress.html',
                pageParam: {
                            id: id
                        }
            });
          }
            //alert( JSON.stringify( ret ) );
        } else {
          msgcode('请检查网络连接')
            //alert( JSON.stringify( err ) );
        }
    });

  }


  function closes() {
    api.closeWin({

    });

  }

  function get_pro() {
    var html =''
    var obj = $api.byId('img_list');

    api.ajax({
        url: SITE_URL+'product_api/index/get_pro',
        method: 'post',
        data: {
            values: {
                id: id
            }

        }
    },function(ret, err){
        if (ret) {
          if(ret.error=200){
            $("#pro_name").html(ret.data.pro_name)
            $("#pro_price").html('￥'+ret.data.price)
            $("#freight").html('运费：'+ret.data.freight)
            $("#content").html(ret.data.content)
            if(ret.data.img_list){
              for (var i = 0; i < ret.data.img_list.length; i++) {
                var dat = ret.data.img_list[i]
                html +='<div class="swiper-slide"><img src="'+dat+'" width="100%" height="100%"></div>'
              }
              $api.html(obj, html);

              var mySwiper = new Swiper ('.swiper-container', {
                autoplay:true,
                loop : true,
              })
            }
          }else{
            msgcode('加载出错')
          }
            //alert( JSON.stringify( ret ) );

        } else {
          msgcode('请检查网络连接')
            //alert( JSON.stringify( err ) );
        }
    });

  }




  </script>
  </html>
